<template>
  <div class="map-main">
    <olcs-map @init-map="initMap"
              @mouse-move="mouseMove"></olcs-map>
    <mouse-position :mouselon="mouselon"
                    :mouselat="mouselat"
                    :mousealt="mousealt" />
  </div>
</template>

<script>
let olcsMap = null
export default {
  name: 'cesium',
  components: {
    olcsMap: () => import('@/components/olCesiumMap2/index.vue'),
    mousePosition: () => import('@/components/olCesiumMap2/mousePosition'),
  },
  data () {
    return {
      mouselat: 0,
      mouselon: 0,
      mousealt: 0,
    };
  },
  watch: {},
  methods: {
    initMap () {
      olcsMap = window.olcsMap2
    },
    mouseMove (latlng) {
      this.mouselon = Number(latlng[0].toFixed(6))
      this.mouselat = Number(latlng[1].toFixed(6))
      this.mousealt = latlng[2] || 0
    },
  },
  created () { },
  mounted () { },
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.map-main {
  flex: 1;
  width: 100%;
  height: 100%;
  position: relative;
  .amap-box {
    width: 100%;
    height: 100%;
    .mission-marker-item {
      // @include vhc-flex();
      // @include wh(28px, 28px);
      width: 28px;
      height: 100%;
      border-radius: 50%;
      background: #fff;
      .item-main {
        // @include wh(24px, 24px)
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 13px;
        background: #177dff;
        color: #fff;
        line-height: 24px;
        text-align: center;
      }
      .item-home,
      .item-start {
        background: #ffb30c;
      }
      .item-end {
        background: #ff520c;
      }
    }
  }
}
</style>